<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/css.css" type="text/css" rel="stylesheet" />
<title>alvin capital</title>
</head>
<%
	String base = request.getContextPath();
%>
<body>

<div id="box" >
	<div class="boot" >
    </div>
	<div id="top" >
    	<div id="top1" >ALVIN</div>
        <div id="top2" >CAPITAL</div>
        <div id="top3" >Name:<input type="text" name="name" size="20" /></div>
    </div>
    <div class="clear" ></div>
    <div id="conectionme" >
    	Connection Status  <img id="status" src="images/pie.gif" />
    </div>
    <div class="clear" ></div>
    <div id="inputbox" >
    	<div id="inputone" ><img src="images/xing.gif" /> </div>
        <div id="nav" >
        	<ul >
            	<li>
                <a href="#" >
            	Blanace
                </a>
				</li>
                <li>
                <a href="#" >
                Equity
                </a>
                </li>
                <li>
                <a href="#" >
                P&amp;L
                </a>
                </li>
                <li>
                <a  href="#" >
                Total Margin
                </a>
                </li>
                <li>
                <a href="#" >
                Trading Resources
                </a>
                </li>
                <li>
                <a href="#" >
                Margin Indicator
                </a>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="clear" ></div>
    <div id="midTop" >
    	<div id="midtop1" >
      
        </div>
        <div id="midtop2" >
        	<img src="images/kxian.gif" />
        </div>
    </div>
    
    <div class="clear" ></div>
    <div class="footMid1" >
    	<div class="midLeft" >
            <table align="center" width="700px" border="0" height="133px" bgcolor="#dbdbdb" >
        	  <tr >
            	<td align="center" width="15%" bgcolor="#736f6e" >
                     <font color="#FFFFFF" >
                       <b>
                        Pending Orders
                      </b>
                     </font>
                </td>
                <td>
                	<table border="1" width="550" height="25" align="center" cellpadding="0" cellspacing="0"  >
                    	<tr align="center" >
                        	<th>Type</th>
                            <th>Market</th>
                            <td>TicketID</th>
                            <th>Qty</th>
                            <th>B/S</th>
                            <th>Amount</th>
                            <th>Rate</th>
                            <th>Stop</th>
                            <th>Limited</th>
                            <th>Move pips</th>
                            <th>Alert alias</th>
                        </tr>
                    </table>
                </td>
            </tr>
            
            <tr>
            	<td  align="center" width="10%" bgcolor="#1e1a17"  ><font color="#FFFFFF" ><b>Cancel</b></font></td>
                <td>
                </td>
            </tr>
            
            <tr>
            	<td align="center" width="10%" bgcolor="#736f6e"  >
                <font color="#FFFFFF" ><b>
                Stops/Limits
                </b>
                </font>
                </td>
                <td>
                </td>
            </tr>
            
            <tr>
            	<td align="center" width="10%" bgcolor="#1e1a17"   >
                <font color="#FFFFFF" ><b>
                Alert
                </b></font>
                </td>
                <td>
                </td>
            </tr>
        </table>        
        </div>
        <div class="midRight" >
        	<h2>Account Information</h2>
            <div id="midCon" >
            	<table cellpadding="1" cellspacing="1" align="center" >
                	<tr align="center" >
                    	<td width="20%" >Accounts</td>
                        <td></td>
                    </tr>
                    <tr align="center"  >
                       <td width="20%" >Blanace</td>
                       <td>open trades</td>
                    </tr>
                    
                    <tr align="center"  >
                       <td width="20%" >Equity</td>
                       <td>Used Margin</td>
                    </tr>
                    
                    <tr align="center"  >
                       <td width="20%" >commissios</td>
                       <td>Used Margin%</td>
                    </tr>                                        
                    
                    <tr align="center" >
					     <td width="20%" >preminms</td>
                         <td>Usable Margin%</td> 
					</tr>   
                </table>
            </div>
        </div>
    </div>
    <div class="clear" ></div>
    <div class="footMid2" >
    	<table align="center" width="1000px" border="0" height="133px" >
        	<tr >
            	<td align="center" width="12%" bgcolor="#736f6e" >
                <font color="#FFFFFF" ><b>
                Open Orders
                </b>
                </font>
                </td>
                <td>
                	<table border="1" width="700" height="25" align="center" cellpadding="0" cellspacing="0"  >
                    	<tr align="center" >
                        	<th>Type</th>
                            <th>Market</th>
                            <td>TicketID</th>
                            <th>Qty</th>
                            <th>B/S</th>
                            <th>Amount</th>
                            <th>Rate</th>
                            <th>Stop</th>
                            <th>Limited</th>
                            <th>Move pips</th>
                            <th>Alert alias</th>
                        </tr>
                    </table>
                </td>
            </tr>
            
            <tr>
            	<td  align="center" width="10%" bgcolor="#1e1a17"  ><font color="#FFFFFF" ><b>Close</b></font></td>
                <td>        
                </td>
            </tr>
            
            <tr>
            	<td align="center" width="10%" bgcolor="#736f6e"  >
                <font color="#FFFFFF" ><b>
                Stops/Limits
                </b>
                </font>
                </td>
                <td>
                </td>
            </tr>
            <tr>
            	<td align="center" width="10%" bgcolor="#1e1a17"   >
                <font color="#FFFFFF" ><b>
                Hedge Reverse
                </b></font>
                </td>
                <td>
                </td>
            </tr>
        </table>
    </div>
    <div id="new"></div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/sockjs-0.3.min.js"></script>
<script>
var url = "<%=base%>/connect";
	
	var  websocket = new SockJS(url);
		
		websocket.onopen = function(event) {
			$("#status").attr("src", "images/online.gif"); 
		};
		websocket.onmessage = function(event) {
			 
			if(data.service == "productService"){
				showProducts(data.param);
			}
		 
		};
		websocket.onerror = function(event) {
			$("#status").attr("src", "images/pie.gif"); 
		};
		websocket.onclose = function(event) {
			$("#status").attr("src", "images/pie.gif"); 
		}
  
		function showProducts(productsInfo){
			var length;
			var products = JSON.parse(productsInfo);
			var populateTable = "";
			
			if (null != products) {
				length = products.length;
			}
			
			for (var i = 0; i < length; i++) {
				 populateTable = populateTable + '<div  class="leftbord" >' ;
				populateTable  = populateTable + '<table border="0px" align="center" width="110px" height="110x" cellpadding="0" cellspacing="2" >';
				populateTable  = populateTable + '<tr><td colspan="2">' + products[i].code + '</td> </tr>';
				populateTable  = populateTable + '<tr> <td bgcolor="#252525" >Sell</td>  <td bgcolor="#767475" >Buy</td>  </tr> ';
				populateTable  = populateTable +' <tr> <td bgcolor="#252525"  >';
				populateTable  = populateTable + products[i].buy;
				populateTable  = populateTable + '</td>  <td bgcolor="#252525"  >';
				populateTable  = populateTable +products[i].sell;
				populateTable  = populateTable + '</td> </tr>  </table>  </div> ';
				 
			}
			 
			$("#midtop1").empty();
			$("#midtop1").html(populateTable);
		}
	</script>
</body>
</html>